<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/ui.css">
    <style>

    </style>
</head>
<body>
    <div class="beijing">
        <ul class="tiao">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
        </ul>
        <div class="yuanshi">
            <span class="ys">10000</span>
            <img src="../css/yuanshi.png" alt="">
        </div>
        <div class="jiuchan">
            <span class="jc">10000</span>
            <img src="../css/pinkball.png" alt="">
        </div>
        <div class="cardpool"></div>
        <img src="../css/sucai/photos/btn1.png" alt="" class="btn1">
        <img src="../css/sucai/photos/btn10.png" alt="" class="btn10">
    </div>
<script>
    const tiao = document.querySelector('.tiao');
    let isDown = false;
    let startX, scrollLeft;

    tiao.addEventListener('mousedown', (e) => {
        isDown = true;
        startX = e.pageX - tiao.offsetLeft;
        scrollLeft = tiao.scrollLeft;
    });

    tiao.addEventListener('mouseleave', () => {
        isDown = false;
    });

    tiao.addEventListener('mouseup', () => {
        isDown = false;
    });

    tiao.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - tiao.offsetLeft;
        const walk = (x - startX) * 3;
        tiao.scrollLeft = scrollLeft - walk;
    });
</script>
</body>
</html>